<template>
  <div>
    <el-card v-loading="loading" shadow="hover" v-for="item in gadgetSetting.menulist" :key="item" class="aui-card--fill">
      <div slot="header" style="height:20px" class="clearfix cardheader">
        <span>{{item.title}}</span>
        <i style="float: right; padding: 3px 0" class="el-icon-arrow-right" @click="onShowContent(item)" ></i>
      </div>
      <div v-if="item.show" >
        <div class="control-section">
          <el-row :gutter="10">
            <el-col v-for="menu in item.menu" style="padding:5px 0px" :key="menu.path" :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <router-link :to="menu.path">{{menu.name}}</router-link>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-card>
    <model :showSetting="queryModelDefaultSetting.showSetting" @queryModelClosed="queryModelClosed"
    :dataInfo="queryModelDefaultSetting.dataInfo" :updateGadget="upgradeGadgetSetting"/>
  </div>
</template>

<script>
import mixinGadgetViewModule from '@/mixins/gadget-view-module'
// import model from '@/components/gadget/query-model/query-model.vue'

export default ({
  mixins: [mixinGadgetViewModule],
  components: { model: () => import('@/components/gadget/query-model/query-model') },
  data: function () {
    return {
      gadgetSetting: null,
      loading: false,
      showContent: true,
      queryModelDefaultSetting: {
        showSetting: false,
        dataInfo: {
          businessId: this.pageId,
          gadgetId: this.id,
          gadgetType: this.gadgetInfo.com,
          gadgetSetting: {
            menulist: [
              { title: 'Example Group Title',
                show: true,
                menu: [
                  { name: 'Example Menu Title', path: 'home' }
                ]
              }
            ]
          }
        }
      }
    }
  },
  beforeCreate () {
    // this.$options.components.model = () => import('@/components/gadget/query-model/query-model')
  },
  created () {
    this.query()
    this.$store.state.isWidget = false
  },

  methods: {
    resetDataForm () {

    },
    getDataListParams () {

    },
    queryModelClosed () {
      this.queryModelDefaultSetting.showSetting = false
      this.query()
    },
    showQueryModel () {
      this.queryModelDefaultSetting.showSetting = true
    },
    query () {
      this.loading = true
      this.gadgetSetting = this.queryModelDefaultSetting.dataInfo.gadgetSetting
      var _self = this
      const params = {
        // businessId: this.pageId,
        gadgetId: this.id,
        includeSql: false
      }
      this.$interface.reports.getReportSettingInfo(params).then(({ data: res }) => {
        if (res.code !== 0) {
          return _self.$message.error(res.msg)
        }
        if (res.data) {
          _self.gadgetSetting = res.data.gadgetSetting
        }
        _self.loading = false
      })
    },
    onShowContent (item) {
      item.show = !item.show
    },
    gotoRouteHandle (menu) {
      if (menu) {
        this.$router.push({ name: 'test11121', path: menu.path, query: { pageid: 123 } })
      }
    }
  }

})
</script>
<style scoped>
 .el-card ::v-deep .el-card__header {
  height: 40px !important;
  line-height: 24px !important;
  padding: 10px 10px !important;
}
</style>
